<template>
    <div class="editForm-wrapper">
        <el-dialog v-if="method === 'add' || 'edit'" :title="title" :close-on-click-modal="false" v-dialogDrag
            :visible.sync="visible">
            <el-form label-width="92px" :model="groupForm" :rules="dataRule" ref="groupForm" v-loading="loading">
                <el-form-item label="分组名称:" prop="names" :rules="[
                  {required: true, message:'分组名称不能为空', trigger:'blur'}
                 ]">
                    <el-input v-model="groupForm.names" maxlength="10" show-word-limit></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <div class="footer-input">
                    <el-button size="small" v-if="method != 'view'" type="primary" @click="doSubmit()" v-noMoreClick>确定</el-button>
                    <el-button size="small" @click="visible = false">取消</el-button>
                </div>
            </span>
        </el-dialog>
        <el-dialog :title="title" :close-on-click-modal="false" v-dialogDrag :visible.sync="addChildVisible">
            <el-form label-width="92px" ref="treeForm" :model="inputForm">
                <el-form-item label="父级名称:" prop="parentName">
                    <el-input v-model="inputForm.parent.names" disabled></el-input>
                </el-form-item>
                <el-form-item label="子级名称:" prop="names" :rules="[
                  {required: true, message:'名称不能为空', trigger:'blur'}
                 ]">
                    <el-input v-model="inputForm.names" maxlength="10" show-word-limit></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <div class="footer-input">
                    <el-button size="small" v-if="method != 'view'" type="primary" @click="doSubmit()" v-noMoreClick>确定</el-button>
                    <el-button size="small" @click="addChildVisible = false">取消</el-button>
                </div>

            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        editGroup
    } from '@/api/truck/truckGroup.js'
    export default {
        data() {
            return {
                groupForm: {
                    names: ''
                },
                isChild: false,
                areaVale: '',
                areaListTreeProps: {
                    label: 'name',
                    children: 'children'
                },
                visible: false,
                addChildVisible: false,
                loading: false,
                method: '',
                title: '新增',
                inputForm: {
                    id: 0,
                    names: '',
                    parent: {
                        names: ''
                    }
                },
                dataRule: {}
            }
        },
        components: {},
        methods: {
            handleClose(done) {
                this.$Msg.confirm({
                    title: '您确定要关闭吗？',
                    content: this.GLOBAL.FORM_CLOSE_TIPS,
                    confirmCall: () => {
                        done();
                    }
                })
            },
            init(method, obj) {
                this.method = method
                if (method === 'add') {
                    this.inputForm.id = obj.id
                    this.title = '新增分组'
                    this.groupForm.names = ''
                    this.visible = true
                } else if (method === 'edit') {
                    this.title = '修改分组'
                    this.groupForm.id = obj.id
                    this.inputForm = {
                        id: 0,
                        names: '',
                        parent: {
                            names: ''
                        }
                    }
                    this.inputForm.id = obj.id
                    this.visible = true
                    this.$nextTick(() => {
                        if (method === 'edit') { // 修改或者查看
                            this.loading = true
                            this.$http({
                                url: `/truck/truckGroup/queryById?id=${this.groupForm.id}`,
                                method: 'get'
                            }).then(({
                                data
                            }) => {
                                if (data.success) {
                                    this.groupForm.names = data.result.names
                                    this.loading = false
                                } else {
                                    this.loading = false
                                    this.visible = false
                                }
                            })
                        }
                    })
                } else if (method === 'addChild') {
                    this.title = '新增分组子级'
                  this.$nextTick(() => {
                    this.$refs.treeForm.resetFields()
                    this.inputForm = obj
                  })
                    this.addChildVisible = true
                }
            },
            // 表单提交
            doSubmit() {
                if (this.method === 'add') {
                    this.$refs['groupForm'].validate((valid) => {
                        if (valid) {
                            this.$set(this.groupForm, 'parentId', 0)
                            this.$set(this.groupForm, 'parentIds', '0,')
                            this.loading = true
                            editGroup(this.groupForm).then(({
                                data
                            }) => {
                                this.loading = false
                                if (data && data.success) {
                                    this.$message({
                                        message: '操作成功',
                                        type: 'success',
                                        duration: 1500
                                    })
                                    this.visible = false
                                    this.addChildVisible = false
                                    this.$emit('refreshDataList')
                                }
                            })
                        }
                    })
                } else if (this.method === 'addChild') {
                    let groupForm = {}
                    groupForm.parentId = this.inputForm.id
                    groupForm.parentIds = this.inputForm.parent.parentIds
                    groupForm.names = this.inputForm.names
                    editGroup(groupForm).then(({
                        data
                    }) => {
                        this.loading = false
                        if (data && data.success) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500
                            })
                            this.visible = false
                            this.addChildVisible = false
                            this.$emit('refreshDataList', 'addChild')
                        }
                    })
                } else if (this.method === 'edit') {
                    let groupForm = {}
                    groupForm.id = this.inputForm.id
                    console.log(this.inputForm)
                    groupForm.names = this.groupForm.names
                    console.log(groupForm)
                    editGroup(groupForm).then(({
                        data
                    }) => {
                        console.log(data)
                        this.loading = false
                        if (data && data.success) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500
                            })
                            this.visible = false
                            this.addChildVisible = false
                            this.$emit('refreshDataList', 'edit')
                        }
                    })
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .hint-container {
        width: 393px;
        height: 11px;
        font-size: 12px;
        font-weight: 400;
        color: #ff1f1f;
    }

    .editForm-wrapper {
        ::v-deep.el-dialog {
            .el-input__inner {
                width: 320px !important;
            }

            .el-dialog__body .el-form .el-form-item {
                margin-bottom: 20px !important;
                margin-right: 0;
            }
        }
    }
</style>
